<template>
  <view class="goods-card" v-if="seele.page_near_top_goods.length>0">
    <!-- 图片区域 -->
    <image 
      :src="$wanlshop.oss(seele.page_near_top_goods[0].image)" 
      mode="widthFix" 
      class="goods-image"
    />

    <!-- 信息与按钮区域 -->
    <view class="info-box">
      <!-- 左侧文字介绍 -->
      <view class="text-area">
        <text class="title">{{seele.page_near_top_goods[0].title}}</text>
        <text class="desc">{{seele.page_near_top_goods[0].description}}</text>
        <text class="price">¥{{seele.page_near_top_goods[0].price}}</text>
      </view>

      <!-- 右侧按钮 -->
      <view 
        class="buy-btn"
        @click="onGoods(seele.page_near_top_goods[0].id)"
      >
        立即抢购
      </view>
    </view>
  </view>
</template>

<script>
	import {mapState} from 'vuex';
export default {
	computed: {...mapState(['seele'])},
  methods: {
    handleBuy() {
      uni.showToast({
        title: '跳转购买页面',
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.goods-card {
  /* width: 95%; */
  margin: 20rpx auto;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

.goods-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.info-box {
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-area {
  flex: 1;
  margin-right: 30rpx;
}

.title {
  display: block;
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.desc {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.price {
  font-size: 36rpx;
  color: #e4393c;
  font-weight: bold;
}

.buy-btn {
  width: 180rpx;
  height: 70rpx;
  background: #07c160;
  border-radius: 10rpx;
  color: #fff;
  text-align: center;
  line-height: 70rpx;
  font-size: 28rpx;
  transition: opacity 0.3s;
}

.buy-btn:active {
  opacity: 0.8;
}
</style>